<template>
  <KView class="goods-order">
    <page-header title="我的订单" @back-click="toBack"></page-header>

    <order-nav :select-menu.sync="selectMenu" @change="menuChange"></order-nav>

    <KView :key="selectMenu" class="goods-order-content" v-if="orderList!==null">
      <goods-order-view v-if="orderList.length>0" :order-list="orderList" :pagination="pagination" :next-data-fun="setOrderList" @pay-order="payOrder"
        @apply-retreat="applyRetreat">
      </goods-order-view>
      <KView v-else class="goods-order-nodata flex-central">
        <KView>您还没有相关的订单</KView>
      </KView>
    </KView>

    <sys-dialog is-center :visible.sync="openDialog" :width="690" top="10%" height="80%" @closed="closeDialog">
      <template slot-scope="scope">
        <retreat-order v-if="scope.isShow" :goods="selectGoods" @ensure="toApplyRetreat" @close="toCloseDialog"></retreat-order>
      </template>
    </sys-dialog>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import PageHeader from 'common/pageHeader';
  import SysDialog from 'common/sysDialog';
  import OrderNav from './orderNav';
  import GoodsOrderView from './goodsOrderView';
  import RetreatOrder from './retreatOrder';

  import Pagination from 'models/pagination';

  import GoodsOrderApi from 'services/goodsOrderApi';

  export default {
    data() {
      let selectMenu = this.$route.query.type;
      if (selectMenu === undefined) {
        selectMenu = 'all';
      }
      return {
        selectMenu: selectMenu,
        isMiniprogram: process.env.isMiniprogram,
        orderList: null,
        pagination: new Pagination(),
        openDialog: false,
        selectGoods: null
      };
    },

    created() {
      this.initData();
    },

    methods: {
      initData() {
        SystemUtil.showLoading();
        this.setOrderList(true).then(() => {
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      setOrderList(isInit = false, pagination, isKeep) {
        if (pagination === undefined) {
          pagination = this.pagination;
        }

        return GoodsOrderApi.getOrderList(this.selectMenu, pagination, isKeep).then(orderList => {
          if (isInit) {
            this.orderList = orderList;
          } else {
            this.orderList.push(...orderList);
          }
          return orderList;
        });
      },

      menuChange() {
        let pagination = new Pagination();
        SystemUtil.showLoading();
        this.setOrderList(true, pagination).then(() => {
          this.pagination = pagination;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      payOrder(order) {
        let orderId = order.orderId;
        let url = `/paymentGoods/${orderId}?type=orderPage`;
        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      applyRetreat(goods, order) {
        if (goods === undefined) {
          this.selectGoods = order;
        } else {
          this.selectGoods = goods;
        }
        this.openDialog = true;
      },

      toApplyRetreat(goods, reason) {
        SystemUtil.showLoading('提交中...');
        GoodsOrderApi.applyRetreatOrder(goods, reason).then(() => {
          return this.setOrderList(true, undefined, true).then(() => {
            SystemUtil.hideLoading();
            this.openDialog = false;
          });
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toCloseDialog() {
        this.openDialog = false;
      },

      closeDialog() {
        this.selectGoods = null;
      },

      resetOrderList(isKeep = false, msg = '') {
        let pagination;
        if (!isKeep) {
          pagination = new Pagination();
        }

        SystemUtil.showLoading(msg);
        return this.setOrderList(true, pagination, isKeep).then(() => {
          SystemUtil.hideLoading();
          if (!isKeep) {
            this.pagination = pagination;
          }
          return true;
        }).catch(() => {
          SystemUtil.hideLoading();
          return false;
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageHeader,
      SysDialog,
      OrderNav,
      GoodsOrderView,
      RetreatOrder
    }
  };

</script>

<style lang="scss">
  .goods-order {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(20);
    }

    .goods-order-content {
      margin-top: formatPx(50);
      height: calc(100% - #{formatPx(260)});

      .goods-order-nodata {
        width: 100%;
        height: 100%;
        color: #333333;
        font-size: formatPx(30);
        text-align: center;
      }
    }
  }

</style>
